<template>
  <basePage :show-tabbar="false" :page-params="pageParams" @testAgainFn="checkSerialnoStatusFn">
    <view class="paymentsuccess-con">
      <image class="image" :src="vuex_imgPath+'/pay_success_bg.png'" />
      <view class="top-text">
        <view v-if="!statusSuccess" class="loading-box">
          <image
            v-if="loadingIconShow"
            class="loading-img"
            src="/payments/static/loading.gif"
          />
          <view>{{ payStatusMsg }}</view>
        </view>
        <template v-else>
          <image class="success-img" :src="vuex_imgPath+'/payment-success.png'" />
          <view>
            {{ successMsg }}
          </view>
        </template>
        <view class="hint">感谢您的购买</view>
        <view class="price">¥{{ totalAmount }}</view>
      </view>
      <view class="success-price-con">
        <view class="success-price-bg">
          <view class="img" />
          <view class="draw">
            <view v-if="showVerifyCode">
              提货码：<text>{{ orderDetailData.verifyCode }}</text>
            </view>
            <button
              v-if="!showVerifyCode"
              type="default"
              :plain="true"
              class="btn-orange-other"
              @click="refreshFn"
            >
              刷新
            </button>
          </view>
          <view class="number">订单号：<text>{{ orderNo }}</text></view>
          <view class="qc">
            <QRCodeImg v-if="orderNo" ref="qrCodeImg" :img-width="QRWidth" :qr-code-info="orderNo" />
          </view>
          <text class="hint">如需打印销售小票，可凭订单二维码前往自助打印机进行打印；自提订单可点击“我的订单”查看提货信息</text>
          <button type="default" class="btn-border" plain="true" @click="saveImgFn">保存至相册</button>
        </view>
      </view>
      <OrderProductList
        v-if="showVerifyCode"
        :order-detail-data="orderDetailData"
        :order-items-detail-data="orderProductList"
        :show-warehouse-label="showWarehouseLabel"
      />
      <view class="sticky-bottom">
        <button
          type="default"
          class="btn-border-gray"
          :plain="true"
          @click="$u.throttle(skipOrderListFn, 500)"
        >
          我的订单
        </button>
        <button
          type="default"
          :plain="true"
          class="sticky-btn btn-orange"
          @click="$u.throttle(skipIndexFn, 500)"
        >
          返回首页
        </button>
      </view>
    </view>
  </basePage>
</template>

<script>
import QRCodeImg from '@/components/QR-code'
import basePage from '@/components/base-page'
import OrderProductList from '@/components/order-product-list/order-product-list'
import { postOrderDetail, postOrderItemsDetail } from '@/api/orderApi'
import { checkSerialnoStatus } from '@/api/payment'
/*const {
  showLoading,
  hideLoading
} = require('@/common/common');*/
export default {
  name: 'Index',
  components: {
    OrderProductList,
    QRCodeImg,
    basePage
  },
  data() {
    return {
      QRWidth: 330,
      qrCodeInfo: '',
      orderInfo: null,
      paySerialnoId: '',
      orderNo: '',
      totalAmount: 0,
      orderDetailData: {},
      orderProductList: {},
      showWarehouseLabel: true, //是否显示仓库标签
      showVerifyCode: false, //是否显示提货码
      showVerifyForOrderType: false, //根据配送方式显示提货码
      checkCount: 1, // 支付状态查询次数
      statusSuccess: false, // 支付状态查询是否完成
      payStatusMsg: '支付状态查询中...', // 查询支付状态成功失败提示
      loadingIconShow: true, // 是否展示loading图
      successMsg: '支付成功',
      pageParams: {
        state: null,
        emptyTitle: '',
        errorTitle: '',
        showButton: false
      }
    }
  },
  onLoad(query) {
    const {
      id,
      amount,
      orderno,
    } = query
    this.$nextTick(() => {
      this.orderNo = orderno
      this.totalAmount = amount
      if (id) {
        this.paySerialnoId = id
        this.checkSerialnoStatusFn()
      } else {
        this.successMsg = '订单确认成功'
        this.statusSuccess = true
        this.loadingIconShow == false
        setTimeout(() => {
          this.refreshFn()
        }, 2000)
      }
    })
  },
  onPullDownRefresh() {
    //刷新后的效果
    if (this.loadingIconShow == false) {
      this.payStatusMsg = '支付状态查询中...'
      this.loadingIconShow = true
      this.statusSuccess = false
      this.checkSerialnoStatusFn()
      return
    }
    uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
  },
  methods: {
    /*保存至相册*/
    saveImgFn() {
      this.$refs.qrCodeImg.longPressFn()
    },
    /*查询支付状态*/
    callbackCheck() {
      if (this.checkCount < 5) {
        this.checkCount++
        this.checkSerialnoStatusFn()
        return
      }
      this.checkCount = 1
      if (this.statusSuccess == false) {
        this.payStatusMsg = '支付状态查询失败'
        this.loadingIconShow = false
        uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
        return;
      }
      this.loadingIconShow = true
    },
    checkSerialnoStatusFn() {
      setTimeout(() => {
        checkSerialnoStatus({ serialnoId: this.paySerialnoId }).then(res => {
          if (res.return_code != 0) {
            this.callbackCheck()
            return
          }
          this.checkCount = 1
          this.statusSuccess = true
          uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
          this.refreshFn()
        }).catch((res) => {
          this.callbackCheck()
        })
      }, 2000)
    },
    /*刷新*/
    refreshFn() {
      this.orderDetail();
      this.orderProductListFn();
    },
    orderDetail() {
      const params = {
        'orderNo': this.orderNo,
      }
      postOrderDetail(params).then((res) => {
        if (res.errorCode == 0) {
          this.showVerifyCode = true
          this.orderDetailData = res.data
          const {
            orderType
          } = this.orderDetailData
          /*19654,"店面自提"、19651,"无货自提"、19655,"配送客户自提"*/
          this.$nextTick(() => {
            if (orderType == 19654 || orderType == 19651 || orderType == 19655) {
              this.showVerifyForOrderType = true
            }
          })
        } else {
          this.$u.toast(res.msg)
        }
      }).catch((res) => {

      })
    },
    orderProductListFn() {
      const params = {
        'orderNo': this.orderNo,
        'pageNum': 1,
        'pageSize': 6
      }
      postOrderItemsDetail(params).then((res) => {
        if (res.errorCode == 0) {
          this.orderProductList = res.data.result
        }
      }).catch((res) => {

      })
    },
    /*跳转我的订单*/
    skipOrderListFn() {
      if (!this.statusSuccess && !this.loadingIconShow) {
        this.$u.toast(`支付状态查询失败，请重新刷新订单支付状态。`)
        return
      }
      if (!this.statusSuccess && this.loadingIconShow) {
        this.$u.toast(`支付状态查询中，请稍后再试。`)
        return
      }
      uni.redirectTo({
        url: '/pages/order/moreOrder'
      });
    },
    /*跳转首页*/
    skipIndexFn() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.paymentsuccess-con{
  padding-bottom:180rpx;
  .image{
    width:750rpx;
    height:388rpx;
    position:absolute;
    top:0;
    left:0;
    right: 0;
    z-index: -1;
  }
  .loading-box{
    width: 300rpx;
    display: flex;
    justify-content: start;
    font-size:$uni-font-size-base;
    color: $uni-white;
    height: 56rpx;
    margin: 0 auto;
    .loading-img{
      width: 56rpx;
      height: 56rpx;
      margin-right: 12rpx;
    }
    view{
      height: 56rpx;
      line-height: 56rpx;
      margin: 0 auto;
    }
  }
  .top-text{
    font-size:$uni-font-size-base;
    padding:60rpx 0 38rpx;
    text-align: center;
    color: #fff;
    line-height: 28rpx;
    font-weight: bold;
    .success-img{
      width: 70rpx;
      height: 64rpx;
      margin-bottom: 12rpx;
    }
    .hint{
      font-size:20rpx;
      font-weight: normal;
    }
    .price{
      font-size: 52rpx;
      font-weight:bold;
      text-align: center;
      padding:12rpx 0 0;
      line-height: 74rpx;
    }
  }
  .success-price-con{
    width:710rpx;
    margin:0 auto 0;
    border-radius: 0 0 16rpx 16rpx;
    .success-price-bg{
      background: $uni-bg-color;
      box-shadow: 0 0 20px 2px rgba(0,0,0,0.02);
      text-align: center;
      padding:0 0 44rpx;
      .img{
        width:710rpx;
        height:44rpx;
        background-image: linear-gradient(180deg, #fabca6 0%, #ffffff 100%);
      }
      .draw{
        font-size:48rpx;
        font-weight: bold;
        padding:0 0 22rpx;
        width: 564rpx;
        text-align: center;
        margin: 0 auto;
        border-bottom: 4rpx dashed #eee;
      }
      .number{
        display: block;
        margin-top: 38rpx;
      }
      .qc{
        width: 330rpx;
        height:330rpx;
        margin: 20rpx auto 0;
      }
      .hint{
        font-size: 20rpx;
        color: $uni-grey-999;
        padding:24rpx 10rpx 0;
        display: block;
      }
      .btn-border{
        display: inline-block;
        margin-top: 40rpx;
        padding:0 20rpx;
        height: 48rpx;
        line-height: 44rpx;
        font-size:$uni-font-size-sm;
        color:$uni-orange;
        border-color:$uni-orange;
        border-radius:$uni-border-radius-lg;
      }
      .btn-orange-other{
        display: inline-block;
        height: 68rpx;
        line-height:68rpx;
        font-size: 40rpx;
        padding: 0 38rpx;
        border-radius:40rpx;
        border: 0;
        background:$uni-orange;
        color: #fff;
        top:14rpx;
        position: relative;
      }
    }
  }
  .sticky-bottom{
    text-align: center;
    .sticky-btn{
      margin:10rpx 12rpx 0;
      padding:0 90rpx!important;
    }
  }
}
</style>
